<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 添加分类按钮 -->
      <el-row style="margin-bottom:15px">
        <el-col>
          <el-button type="primary" @click="addCate">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 表格 vue-table-with-tree-grid  @0.2.4  实例代码example->Example.vue -->
      <tree-table :data="cateList" :columns="columns" show-index
        :index-text="'#'" :selection-type="false" :expand-type="false" border
        :show-row-hover="false">
        <template #isok="{row}">
          <i class="el-icon-success" v-if="row.cat_deleted===false"
            style="color:#39ce39"></i>
          <i class="el-icon-error" v-else></i>
        </template>
        <template #issort="{row}">
          <el-tag v-if="row.cat_level===0" type="danger">一级</el-tag>
          <el-tag v-else-if="row.cat_level===1" type="warning">二级</el-tag>
          <el-tag v-else-if="row.cat_level===2">三级</el-tag>
        </template>
        <template #isbutton>
          <el-button type="primary" size="mini" icon="el-icon-edit">编辑
          </el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete">删除
          </el-button>
        </template>
      </tree-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
        :page-sizes="[2, 5, 10, 15]" :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    <!-- 添加分类对话框 -->
    <el-dialog title="添加商品分类" :visible.sync="addcateDialogVisible" width="50%"
      @close="resetCateForm">
      <!-- 主体 -->
      <el-form ref="addCateForm" :model="addCateform" label-width="80px"
        :rules="addCateRules">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addCateform.cat_name"></el-input>
        </el-form-item>
        <el-form-item label="父级分类">
          <!-- 级联选择器 -->
          <el-cascader v-model="pCateKeys" :options="pCateList"
            :props="{ expandTrigger: 'hover' ,label:'cat_name',value:'cat_id',checkStrictly:true}"
            @change="pIdChange">
          </el-cascader>
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addcateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAddCate">确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 数据参数
      queryInfo: {
        pagenum: 1,
        pagesize: 10
      },
      // 数据列表
      cateList: [],
      // 数据总条数
      total: 0,
      // 列属性
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          type: 'template',
          template: 'isok'
        },
        {
          label: '排序',
          type: 'template',
          template: 'issort'
        },
        {
          label: '操作',
          type: 'template',
          template: 'isbutton'
        }
      ],
      // 添加分类对话框显隐
      addcateDialogVisible: false,
      // 添加分类表单
      addCateform: {
        // 分类名
        cat_name: '',
        // 父级分类id
        cat_pid: 0,
        // 分类等级
        cat_level: 0
      },
      // 添加分类表单验证
      addCateRules: {
        cat_name: [
          { required: true, message: '分类名称不能为空', trigger: 'blur' }
        ]
      },
      // 父级分类数组
      pCateList: [],
      // 父级分类点击绑定数据
      pCateKeys: []

    }
  },
  created () {
    this.getCateList()
  },
  methods: {
    // 获取数据
    async getCateList () {
      const { data: res } = await this.$http.get('categories', { params: this.queryInfo })
      // console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取商品分类失败')
      this.cateList = res.data.result
      this.total = res.data.total
    },
    // 页码值改变
    handleSizeChange (size) {
      this.queryInfo.pagesize = size
      this.getCateList()
    },
    // 当前页改变
    handleCurrentChange (page) {
      this.queryInfo.pagenum = page
      this.getCateList()
    },
    // 添加分类对话框显示
    async addCate () {
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } })
      if (res.meta.status !== 200) return this.$message.error('获取父级分类失败')
      // console.log(res)
      this.pCateList = res.data
      this.addcateDialogVisible = true
    },
    // 级联选择器 值改变  同步改变添加分类表单的值
    pIdChange () {
      console.log(this.pCateKeys)
      if (this.pCateKeys.length === 0) {
        this.addCateform.cat_pid = 0
        this.addCateform.cat_level = 0
      } else {
        this.addCateform.cat_pid = this.pCateKeys[this.pCateKeys.length - 1]
        this.addCateform.cat_level = this.pCateKeys.length
      }
    },
    // 添加分类对话框 确认按钮
    saveAddCate () {
      // console.log(this.addCateform)
      this.$refs.addCateForm.validate(async (valid) => {
        if (!valid) return this.$message.info('请重新填写')
        const { data: res } = await this.$http.post('categories', this.addCateform)
        // console.log(res)
        if (res.meta.status !== 201) return this.$message.error('添加分类失败')
        this.$message.success('添加分类成功')
        this.addcateDialogVisible = false
        this.getCateList()
      })
    },
    // 关闭添加分类对话框 重置表单
    resetCateForm () {
      this.$refs.addCateForm.resetFields()
      this.addCateform.cat_pid = 0
      this.addCateform.cat_level = 0
      this.addCateform.cat_name = ''
      this.pCateKeys = []
    }
  }

}
</script>

<style scoped lang='less'>
.zk-table {
  color: #606266 !important;
}
.el-cascader {
  width: 100%;
}
</style>
